<script lang="ts">
import { defineComponent, onMounted, nextTick, inject } from 'vue'
import { WebMapTileServiceImageryProvider, ProviderViewModel, buildModuleUrl, Viewer, ImageryLayer } from 'cesium'
export default defineComponent({
  setup () {
    const viewer = inject<Viewer>('vumViewer')
    if (!viewer) return
    const imageryViewModels: ProviderViewModel[] = []
    var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
    const imgProvider = new WebMapTileServiceImageryProvider({
      //影像底图
      url: import.meta.env.VITE_IMG_PROVIDER as string,
      subdomains: subdomains,
      layer: 'tdtImgLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',//使用谷歌的瓦片切片方式
      maximumLevel: 18,
    })
    const imgAnnoProvider = new WebMapTileServiceImageryProvider({
      url: import.meta.env.VITE_IMG_ANNOPROVIDER as string,
      subdomains: subdomains,
      layer: 'tdtImgAnnoLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',//使用谷歌的瓦片切片方式
      maximumLevel: 18,
    })

    const vecProvider = new WebMapTileServiceImageryProvider({
      //影像底图
      url: import.meta.env.VITE_VEC_PROVIDER as string,
      subdomains: subdomains,
      layer: 'tdtVecLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',//使用谷歌的瓦片切片方式
      maximumLevel: 18,
    })
    const vecAnnoProvider = new WebMapTileServiceImageryProvider({
      url: import.meta.env.VITE_VEC_ANNOPROVIDER as string,
      subdomains: subdomains,
      layer: 'tdtVecAnnoLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',//使用谷歌的瓦片切片方式
      maximumLevel: 18,
    })
    let annoLayer: ImageryLayer

    imageryViewModels.push(new ProviderViewModel({
      name: '电子',
      iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
      tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world.\nhttp://www.openstreetmap.org',
      creationFunction: function () {
        if (annoLayer) viewer.imageryLayers.remove(annoLayer)
        nextTick().then(() => {
          annoLayer = viewer.imageryLayers.addImageryProvider(vecAnnoProvider)
        })
        return vecProvider
      },
    }))
    imageryViewModels.push(new ProviderViewModel({
      name: '影像',
      iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
      tooltip: 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
      creationFunction: function () {
        if (annoLayer) viewer.imageryLayers.remove(annoLayer)
        nextTick().then(() => {
          annoLayer = viewer.imageryLayers.addImageryProvider(imgAnnoProvider)
        })
        return imgProvider
      },
    }))

    onMounted(() => {
      viewer.baseLayerPicker.viewModel.imageryProviderViewModels = imageryViewModels
      const pickLabel = document.querySelector('.cesium-baseLayerPicker-sectionTitle')
      if (!pickLabel) return
      pickLabel.innerHTML = '选择底图'
      const pickImg: HTMLImageElement | null = document.querySelector('.cesium-baseLayerPicker-selected')
      if (!pickImg) return
      pickImg.src = buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png')
      pickImg.style.display = 'block'

    })

    return {
      imageryViewModels,
    }
  },
})
</script>
<template>
  <slot></slot>
</template>

<style>
</style>
